<template>
	<view class="order_pay">
		<view class="grid-item" @click="toDetail(item.id)">
			<image class="image_10" :src="ossUrl + detail.image" />
			<view class="cont_item">
				<text class="font text_4 mt-10">{{ detail.title }}</text>
				<view class="font_9 mt-6 flex justify-between">
					<text class="font_8">观看人数：{{ detail.watch_number }}</text>
					{{ detail.createtime }}
				</view>
				<view class="flex justify-between items-center mt-12">
					<view class="price">{{ detail.price }}元</view>
				</view>
			</view>
		</view>
		<view class="pay_item">
			<view class="flex justify-between">
				<view>合计</view>
				<view class="price">￥{{ detail.price }}</view>
			</view>
			<view class="flex justify-between">
				<view>支付方式</view>
				<view class="text">微信支付</view>
			</view>
		</view>
		<view class="bot_btn">
			￥{{ detail.price }}
			<view class="btn" @click="addOrderFun()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		addOrder,
		wxCallback
	} from '@/api/coures.js'
	export default {
		data() {
			return {
				remoteUrl: remoteUrl,
				ossUrl: ossUrl,
				detail: ''
			};
		},
		onLoad(options) {
			this.detail = JSON.parse(decodeURIComponent(options.detail))
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			addOrderFun() {
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				addOrder({
					course_id: this.detail.id
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let attach_id = res.data.id
						// 小程序代码
						wx.cloud.callFunction({
							name: "payOrder",
							data: {
								totalFee: Number(res.data.money * 100),
								goodName: that.detail.title,
								id: res.data.id
							},
							success: (res) => {
								console.log(res)
								uni.hideLoading()
								const payment = res.result.payment;
								// 调起微信客户端支付
								wx.requestPayment({
									...payment,
									success(res) {
										/* 成功回调 */
										console.log(res)
										uni.redirectTo({
											url: '/pages/pages-list/my_buy/my_buy'
										})
									},
									fail(err) {
										/* 失败回调 */
										console.log(err)
									}
								});
							},
							fail: (err) => {
								uni.hideLoading()
								console.log(err)
							}
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 成功支付回调
			paySuccess(id) {
				wx.cloud.callFunction({
					name: "payCallback",
					success: (e) => {
						console.log(e)
						// wxCallback({
						// 	attach: id,
						// 	transactionId: e.transactionId,
						// 	type: 1
						// }).then(res => {
						// 	if (res.code == 1) {
						// 		uni.redirectTo({
						// 			url: '/pages/pages-list/my_buy/my_buy'
						// 		})
						// 	}
						// })
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.order_pay {
		height: 100vh;
		background: #F5F5F5;
		padding-top: 30rpx;

		.grid-item {
			width: 690rpx;
			margin: 0 auto 20rpx;
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20.72rpx 11rpx 19rpx 13rpx;

			.image_10 {
				border-radius: 10rpx;
				width: 200rpx;
				height: 150rpx;
			}

			.cont_item {
				width: 68%;

				.font {
					font-size: 28rpx;
					color: #000000;
				}

				.font_9 {
					font-size: 20rpx;
					color: #000000;
				}

				.font_8 {
					font-size: 22rpx;
					color: #000000;
				}

				.price {
					color: #1c41f1;
					font-size: 28rpx;
				}

			}
		}

		.pay_item {
			width: 690rpx;
			margin: 30rpx auto;
			padding: 18rpx 20rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #00000050;

			>view {
				padding: 15rpx 0;
			}

			.price {
				color: #000000;
			}

			.text {
				color: #70D042;
			}
		}

		.bot_btn {
			width: 100vw;
			height: 150rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.btn {
				width: 402rpx;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				background: #1C41F1;
				color: #fff;
				font-size: 28rpx;
				border-radius: 54rpx;
			}
		}
	}
</style>